﻿@using Aspire.Dashboard.Resources
@typeparam T

<div class="summary-details-container">
    <FluentSplitter Orientation="@Orientation" Collapsed="@(!_internalShowDetails || !ViewportInformation.IsDesktop)"
                    OnResized="HandleSplitterResize"
                    Panel1Size="@EffectivePanel1Size" Panel2Size="@EffectivePanel2Size"
                    Panel1MinSize="@PanelMinimumSize" Panel2MinSize="@PanelMinimumSize"
                    BarSize="5"
                    @ref="_splitterRef">
        <Panel1>
            @*
                The summary container should never be added/removed from the DOM. If it is added/removed then content dynamically
                added by JS libraries, such as the resource graph, will be lost when switching between desktop and mobile views.
            *@
            <div class="summary-container" style="@(_internalShowDetails && !ViewportInformation.IsDesktop ? "display:none" : string.Empty)">
                @Summary
            </div>
            @if (_internalShowDetails && !ViewportInformation.IsDesktop)
            {
                <DetailView DetailsTitle="@DetailsTitle"
                            DetailsTitleTemplate="@(SelectedValue is not null ? DetailsTitleTemplate?.Invoke(SelectedValue) : null)"
                            HandleDismissAsync="@HandleDismissAsync"
                            HandleToggleOrientation="@HandleToggleOrientation"
                            Details="@(SelectedValue is not null ? Details?.Invoke(SelectedValue) : null)"
                            Orientation="@Orientation" />
            }
        </Panel1>
        <Panel2>
            @if (_internalShowDetails && ViewportInformation.IsDesktop)
            {
                <DetailView DetailsTitle="@DetailsTitle"
                            DetailsTitleTemplate="@(SelectedValue is not null ? DetailsTitleTemplate?.Invoke(SelectedValue) : null)"
                            HandleDismissAsync="@HandleDismissAsync"
                            HandleToggleOrientation="@HandleToggleOrientation"
                            Details="@(SelectedValue is not null ? Details?.Invoke(SelectedValue) : null)"
                            Orientation="@Orientation" />
            }
        </Panel2>
    </FluentSplitter>
</div>
